<template>
  <div>
    <!-- <input class="button" id="button" type="button" value="开始验证" @click="verify()"> -->
    <!-- <a-alert message="区块ID为：'{this.ID}'" type="info" style="marginTop:160px;marginBottom:20px" /> -->
    <a-card title="区块ID" style="width: 300px; margin: 6% 0 0 80%;">
      <template #extra>
        <button style="" @click="verify()">开始验证</button>
      </template>
      <p v-if="this.$route.query.transit">{{this.$route.query.transit.ID}}</p>
    </a-card>
    <TreeChart :json="treeData" class="treeClass"></TreeChart>
  </div>
</template>
<script>
  import TreeChart from 'vue-tree-chart';
  import image1 from '@/assets/tree/origin.png';
  import image2 from '@/assets/tree/validating.png';
  import image3 from '@/assets/tree/success.png';


  export default {
    components: {
      TreeChart
    },
    data() {
      return {
        // image1: '../../assets/tree/origin.png',

        images: [image1, image2, image3],
        randomData: 1,
        treeData: {
          name: 'root',
          image_url: image1,
          class: ["rootNode"],
          children: [
            {
              name: '(1|2)',
              image_url: image1,
              children: [
                {
                  name: 'hash1',
                  image_url: image1,
                  children: [
                    {
                      name: 'hash',
                      image_url: image1,
                      // mate: [{
                      //   name: 'EdJ7LXBRaGJ7XAo/uwED4tvMct3rCHaI3uTePdRDC4Y='
                      //    image_url: image1,
                      // }],
                      children: [
                        {
                          name: '证据1',
                          image_url: image1,
                        }
                      ]
                    },
                    {
                      name: 'hash1.2',
                      image_url: image1,
                      children: [
                        {
                          name: '证据2',
                          image_url: image1,
                        }
                      ]
                    },
                  ]
                },
                {
                  name: 'hash2',
                  image_url: image1,
                  children: [
                    {
                      name: 'hash2.1',
                      image_url: image1,
                      children: [
                        {
                          name: '证据3',
                          image_url: image1,
                        }
                      ]
                    },
                    {
                      name: 'hash2.2',
                      image_url: image1,
                      children: [
                        {
                          name: '证据4',
                          image_url: image1,
                        }
                      ]
                    },
                  ]
                },

              ]
            },
            {
              name: '(3|4)',
              image_url: image1,
              children: [
                {
                  name: 'hash3',
                  image_url: image1,
                  children: [
                    {
                      name: 'hash3.1',
                      image_url: image1,
                      children: [
                        {
                          name: '证据5',
                          image_url: image1,
                        }
                      ]
                    },
                    {
                      name: 'hash3.2',
                      image_url: image1,
                      children: [
                        {
                          name: '证据6',
                          image_url: image1,
                        }
                      ]
                    },
                  ]
                },
                {
                  name: 'hash4',
                  image_url: image1,
                  children: [
                    {
                      name: 'hash4.1',
                      image_url: image1,
                      children: [
                        {
                          name: '证据7',
                          image_url: image1,
                        }
                      ]
                    },
                    {
                      name: 'hash4.2',
                      image_url: image1,
                      children: [
                        {
                          name: '证据8',
                          image_url: image1,
                        }
                      ]
                    },
                  ]
                },
              ]
            },
          ]
        },
        // ID: this.$route.query.transit.ID,
      }
    },
    methods: {
      verify() {


        switch (this.randomData) {
          case 1: this.validPlay1(); break;
          case 2: this.validPlay2(); break;
          case 3: this.validPlay3(); break;
          case 4: this.validPlay4(); break;
          case 5: this.validPlay5(); break;
          case 6: this.validPlay6(); break;
          case 7: this.validPlay7(); break;
          case 8: this.validPlay8(); break;
        }

        if (this.$route.query.transit) { console.log("hash:", this.$route.query.transit.hash) }
      },
      setTreeValueByKey(item, key, values, islast) {
        // islast判断是否为最后一层赋值
        if (!islast) {
          if (item.children != undefined) {
            item[key] = values.shift()
          }
        } else {
          item[key] = values.shift()
        }

        if (item.children != undefined && item.children != '' && item.children.length != 0) {
          if (item.children[0] != undefined && item.children[0] != '') {
            this.setTreeValueByKey(item.children[0], key, values, islast)
          }

          if (item.children[1] != undefined && item.children[1] != '') {
            this.setTreeValueByKey(item.children[1], key, values, islast)
          }
        }
      },


      //证据3
      validPlay3() {

        this.treeData.children[0].children[1].children[0].children[0].image_url = this.images[1]
        if (this.$route.query.transit) { this.treeData.children[0].children[1].children[0].name = this.$route.query.transit.hash }
        this.treeData.children[0].children[1].children[0].image_url = this.images[1]
        this.treeData.children[0].children[1].children[1].image_url = this.images[1]
        this.treeData.children[0].children[1].image_url = this.images[1]
        setTimeout(() => {
          this.treeData.children[0].children[1].children[0].image_url = this.images[2]
          this.treeData.children[0].children[1].children[1].image_url = this.images[2]
          this.treeData.children[0].children[1].image_url = this.images[2]
          setTimeout(() => {
            this.treeData.children[0].children[1].image_url = this.images[1]
            this.treeData.children[0].children[0].image_url = this.images[1]
            this.treeData.children[0].image_url = this.images[1]
            setTimeout(() => {
              this.treeData.children[0].children[1].image_url = this.images[2]
              this.treeData.children[0].children[0].image_url = this.images[2]
              this.treeData.children[0].image_url = this.images[2]
              setTimeout(() => {
                this.treeData.children[0].image_url = this.images[1]
                this.treeData.children[1].image_url = this.images[1]
                this.treeData.image_url = this.images[1]
                setTimeout(() => {
                  this.treeData.children[0].image_url = this.images[2]
                  this.treeData.children[1].image_url = this.images[2]
                  this.treeData.image_url = this.images[2]
                  this.treeData.children[0].children[1].children[0].children[0].image_url = this.images[2]
                  this.validResult(this.treeData.name)
                }, 3000)
              }, 1000)
            }, 3000)
          }, 1000)
        }, 3000)
      },
      //证据4
      validPlay4() {
        //  证据4先亮红
        this.treeData.children[0].children[1].children[1].children[0].image_url = this.images[1]
        if (this.$route.query.transit) { this.treeData.children[0].children[1].children[1].name = this.$route.query.transit.hash }
        this.treeData.children[0].children[1].children[0].image_url = this.images[1]
        this.treeData.children[0].children[1].children[1].image_url = this.images[1]
        this.treeData.children[0].children[1].image_url = this.images[1]
        setTimeout(() => {
          this.treeData.children[0].children[1].children[0].image_url = this.images[2]
          this.treeData.children[0].children[1].children[1].image_url = this.images[2]
          this.treeData.children[0].children[1].image_url = this.images[2]
          setTimeout(() => {
            this.treeData.children[0].children[1].image_url = this.images[1]
            this.treeData.children[0].children[0].image_url = this.images[1]
            this.treeData.children[0].image_url = this.images[1]
            setTimeout(() => {
              this.treeData.children[0].children[1].image_url = this.images[2]
              this.treeData.children[0].children[0].image_url = this.images[2]
              this.treeData.children[0].image_url = this.images[2]
              setTimeout(() => {
                this.treeData.children[0].image_url = this.images[1]
                this.treeData.children[1].image_url = this.images[1]
                this.treeData.image_url = this.images[1]
                setTimeout(() => {
                  this.treeData.children[0].image_url = this.images[2]
                  this.treeData.children[1].image_url = this.images[2]
                  this.treeData.image_url = this.images[2]
                  this.treeData.children[0].children[1].children[1].children[0].image_url = this.images[2]
                  this.validResult(this.treeData.name)
                }, 3000)
              }, 1000)
            }, 3000)
          }, 1000)
        }, 3000)
      },
      //证据1
      validPlay1() {
        //  证据4先亮红
        this.treeData.children[0].children[0].children[0].children[0].image_url = this.images[1]
        if (this.$route.query.transit) { this.treeData.children[0].children[0].children[0].name = this.$route.query.transit.hash }
        this.treeData.children[0].children[0].children[0].image_url = this.images[1]
        this.treeData.children[0].children[0].children[1].image_url = this.images[1]
        this.treeData.children[0].children[0].image_url = this.images[1]
        setTimeout(() => {
          this.treeData.children[0].children[0].children[0].image_url = this.images[2]
          this.treeData.children[0].children[0].children[1].image_url = this.images[2]
          this.treeData.children[0].children[0].image_url = this.images[2]
          setTimeout(() => {
            this.treeData.children[0].children[1].image_url = this.images[1]
            this.treeData.children[0].children[0].image_url = this.images[1]
            this.treeData.children[0].image_url = this.images[1]
            setTimeout(() => {
              this.treeData.children[0].children[1].image_url = this.images[2]
              this.treeData.children[0].children[0].image_url = this.images[2]
              this.treeData.children[0].image_url = this.images[2]
              setTimeout(() => {
                this.treeData.children[0].image_url = this.images[1]
                this.treeData.children[1].image_url = this.images[1]
                this.treeData.image_url = this.images[1]
                setTimeout(() => {
                  this.treeData.children[0].image_url = this.images[2]
                  this.treeData.children[1].image_url = this.images[2]
                  this.treeData.image_url = this.images[2]
                  this.treeData.children[0].children[0].children[0].children[0].image_url = this.images[2]
                  this.validResult(this.treeData.name)
                }, 3000)
              }, 1000)
            }, 3000)
          }, 1000)
        }, 3000)
      },
      //证据1
      validPlay2() {

        this.treeData.children[0].children[0].children[1].children[0].image_url = this.images[1]
        if (this.$route.query.transit) { this.treeData.children[0].children[0].children[1].name = this.$route.query.transit.hash }
        this.treeData.children[0].children[0].children[0].image_url = this.images[1]
        this.treeData.children[0].children[0].children[1].image_url = this.images[1]
        this.treeData.children[0].children[0].image_url = this.images[1]
        setTimeout(() => {
          this.treeData.children[0].children[0].children[0].image_url = this.images[2]
          this.treeData.children[0].children[0].children[1].image_url = this.images[2]
          this.treeData.children[0].children[0].image_url = this.images[2]
          setTimeout(() => {
            this.treeData.children[0].children[1].image_url = this.images[1]
            this.treeData.children[0].children[0].image_url = this.images[1]
            this.treeData.children[0].image_url = this.images[1]
            setTimeout(() => {
              this.treeData.children[0].children[1].image_url = this.images[2]
              this.treeData.children[0].children[0].image_url = this.images[2]
              this.treeData.children[0].image_url = this.images[2]
              setTimeout(() => {
                this.treeData.children[0].image_url = this.images[1]
                this.treeData.children[1].image_url = this.images[1]
                this.treeData.image_url = this.images[1]
                setTimeout(() => {
                  this.treeData.children[0].image_url = this.images[2]
                  this.treeData.children[1].image_url = this.images[2]
                  this.treeData.image_url = this.images[2]
                  this.treeData.children[0].children[0].children[1].children[0].image_url = this.images[2]
                  this.validResult(this.treeData.name)
                }, 3000)
              }, 1000)
            }, 3000)
          }, 1000)
        }, 3000)
      },

      // 证据5
      validPlay5() {
        //  证据4先亮红
        this.treeData.children[1].children[0].children[0].children[0].image_url = this.images[1]
        if (this.$route.query.transit) { this.treeData.children[1].children[0].children[0].name = this.$route.query.transit.hash }
        this.treeData.children[1].children[0].children[0].image_url = this.images[1]
        this.treeData.children[1].children[0].children[1].image_url = this.images[1]
        this.treeData.children[1].children[0].image_url = this.images[1]
        setTimeout(() => {
          this.treeData.children[1].children[0].children[0].image_url = this.images[2]
          this.treeData.children[1].children[0].children[1].image_url = this.images[2]
          this.treeData.children[1].children[0].image_url = this.images[2]
          setTimeout(() => {
            this.treeData.children[1].children[1].image_url = this.images[1]
            this.treeData.children[1].children[0].image_url = this.images[1]
            this.treeData.children[1].image_url = this.images[1]
            setTimeout(() => {
              this.treeData.children[1].children[1].image_url = this.images[2]
              this.treeData.children[1].children[0].image_url = this.images[2]
              this.treeData.children[1].image_url = this.images[2]
              setTimeout(() => {
                this.treeData.children[0].image_url = this.images[1]
                this.treeData.children[1].image_url = this.images[1]
                this.treeData.image_url = this.images[1]
                setTimeout(() => {
                  this.treeData.children[0].image_url = this.images[2]
                  this.treeData.children[1].image_url = this.images[2]
                  this.treeData.image_url = this.images[2]
                  this.treeData.children[1].children[0].children[0].children[0].image_url = this.images[2]
                  this.validResult(this.treeData.name)
                }, 3000)
              }, 1000)
            }, 3000)
          }, 1000)
        }, 3000)
      },
      // 证据6
      validPlay6() {

        this.treeData.children[1].children[0].children[1].children[0].image_url = this.images[1]
        if (this.$route.query.transit) { this.treeData.children[1].children[0].children[1].name = this.$route.query.transit.hash }
        this.treeData.children[1].children[0].children[0].image_url = this.images[1]
        this.treeData.children[1].children[0].children[1].image_url = this.images[1]
        this.treeData.children[1].children[0].image_url = this.images[1]
        setTimeout(() => {
          this.treeData.children[1].children[0].children[0].image_url = this.images[2]
          this.treeData.children[1].children[0].children[1].image_url = this.images[2]
          this.treeData.children[1].children[0].image_url = this.images[2]
          setTimeout(() => {
            this.treeData.children[1].children[1].image_url = this.images[1]
            this.treeData.children[1].children[0].image_url = this.images[1]
            this.treeData.children[1].image_url = this.images[1]
            setTimeout(() => {
              this.treeData.children[1].children[1].image_url = this.images[2]
              this.treeData.children[1].children[0].image_url = this.images[2]
              this.treeData.children[1].image_url = this.images[2]
              setTimeout(() => {
                this.treeData.children[0].image_url = this.images[1]
                this.treeData.children[1].image_url = this.images[1]
                this.treeData.image_url = this.images[1]
                setTimeout(() => {
                  this.treeData.children[0].image_url = this.images[2]
                  this.treeData.children[1].image_url = this.images[2]
                  this.treeData.image_url = this.images[2]
                  this.treeData.children[1].children[0].children[1].children[0].image_url = this.images[2]
                  this.validResult(this.treeData.name)
                }, 3000)
              }, 1000)
            }, 3000)
          }, 1000)
        }, 3000)
      },
      // 证据7
      validPlay7() {
        if (this.$route.query.transit) { this.treeData.children[1].children[1].children[0].name = this.$route.query.transit.hash }
        this.treeData.children[1].children[1].children[0].children[0].image_url = this.images[1]
        this.treeData.children[1].children[1].children[0].image_url = this.images[1]
        this.treeData.children[1].children[1].children[1].image_url = this.images[1]
        this.treeData.children[1].children[1].image_url = this.images[1]
        setTimeout(() => {
          this.treeData.children[1].children[1].children[0].image_url = this.images[2]
          this.treeData.children[1].children[1].children[1].image_url = this.images[2]
          this.treeData.children[1].children[1].image_url = this.images[2]
          setTimeout(() => {
            this.treeData.children[1].children[1].image_url = this.images[1]
            this.treeData.children[1].children[0].image_url = this.images[1]
            this.treeData.children[1].image_url = this.images[1]
            setTimeout(() => {
              this.treeData.children[1].children[1].image_url = this.images[2]
              this.treeData.children[1].children[0].image_url = this.images[2]
              this.treeData.children[1].image_url = this.images[2]
              setTimeout(() => {
                this.treeData.children[0].image_url = this.images[1]
                this.treeData.children[1].image_url = this.images[1]
                this.treeData.image_url = this.images[1]
                setTimeout(() => {
                  this.treeData.children[0].image_url = this.images[2]
                  this.treeData.children[1].image_url = this.images[2]
                  this.treeData.image_url = this.images[2]
                  this.treeData.children[1].children[1].children[0].children[0].image_url = this.images[2]
                  this.validResult(this.treeData.name)
                }, 3000)
              }, 1000)
            }, 3000)
          }, 1000)
        }, 3000)
      },
      // 证据8
      validPlay8() {
        if (this.$route.query.transit) { this.treeData.children[1].children[1].children[1].name = this.$route.query.transit.hash }
        this.treeData.children[1].children[1].children[1].children[0].image_url = this.images[1]
        this.treeData.children[1].children[1].children[0].image_url = this.images[1]
        this.treeData.children[1].children[1].children[1].image_url = this.images[1]
        this.treeData.children[1].children[1].image_url = this.images[1]
        setTimeout(() => {
          this.treeData.children[1].children[1].children[0].image_url = this.images[2]
          this.treeData.children[1].children[1].children[1].image_url = this.images[2]
          this.treeData.children[1].children[1].image_url = this.images[2]
          setTimeout(() => {
            this.treeData.children[1].children[1].image_url = this.images[1]
            this.treeData.children[1].children[0].image_url = this.images[1]
            this.treeData.children[1].image_url = this.images[1]
            setTimeout(() => {
              this.treeData.children[1].children[1].image_url = this.images[2]
              this.treeData.children[1].children[0].image_url = this.images[2]
              this.treeData.children[1].image_url = this.images[2]
              setTimeout(() => {
                this.treeData.children[0].image_url = this.images[1]
                this.treeData.children[1].image_url = this.images[1]
                this.treeData.image_url = this.images[1]
                setTimeout(() => {
                  this.treeData.children[0].image_url = this.images[2]
                  this.treeData.children[1].image_url = this.images[2]
                  this.treeData.image_url = this.images[2]
                  this.treeData.children[1].children[1].children[1].children[0].image_url = this.images[2]
                  this.validResult(this.treeData.name)
                }, 3000)
              }, 1000)
            }, 3000)
          }, 1000)
        }, 3000)
      },
      validResult(hash) {
        alert('计算后的hash：' + hash + '  ,根节点hash：' + hash + '，数据未被篡改！！！')
      }





    },
    activated() {
      this.randomData = Math.floor(Math.random() * 8) + 1;
      const hashSet = new Set();
      while (hashSet.size < 15) {
        const hash = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
        if (!hashSet.has(hash)) {
          hashSet.add(hash);
        }
      }
      let hashes = [...hashSet]
      let imgValues = []
      for (let i = 0; i < 23; i++) {
        imgValues.push(this.images[0])
      }
      this.setTreeValueByKey(this.treeData, 'image_url', imgValues, true)
      console.log(this.images[0])
      this.setTreeValueByKey(this.treeData, 'name', hashes, false)

      switch (this.randomData) {
        case 1: {
          this.treeData.children[0].children[0].children[0].children[0].image_url = this.images[1]
          if (this.$route.query.transit) { this.treeData.children[0].children[0].children[0].name = this.$route.query.transit.hash }
        } break;
        case 2: {
          this.treeData.children[0].children[0].children[1].children[0].image_url = this.images[1]
          if (this.$route.query.transit) { this.treeData.children[0].children[0].children[1].name = this.$route.query.transit.hash }
        } break;
        case 3: {
          this.treeData.children[0].children[1].children[0].children[0].image_url = this.images[1]
          if (this.$route.query.transit) { this.treeData.children[0].children[1].children[0].name = this.$route.query.transit.hash }
        } break;
        case 4: {
          this.treeData.children[0].children[1].children[1].children[0].image_url = this.images[1]
          if (this.$route.query.transit) { this.treeData.children[0].children[1].children[1].name = this.$route.query.transit.hash }
        } break;
        case 5: {
          this.treeData.children[1].children[0].children[0].children[0].image_url = this.images[1]
          if (this.$route.query.transit) { this.treeData.children[1].children[0].children[0].name = this.$route.query.transit.hash }
        } break;
        case 6: {
          this.treeData.children[1].children[0].children[1].children[0].image_url = this.images[1]
          if (this.$route.query.transit) { this.treeData.children[1].children[0].children[1].name = this.$route.query.transit.hash }
        } break;
        case 7: {
          if (this.$route.query.transit) { this.treeData.children[1].children[1].children[0].name = this.$route.query.transit.hash }
          this.treeData.children[1].children[1].children[0].children[0].image_url = this.images[1]
        } break;
        case 8: {
          if (this.$route.query.transit) { this.treeData.children[1].children[1].children[1].name = this.$route.query.transit.hash }
          this.treeData.children[1].children[1].children[1].children[0].image_url = this.images[1]
        } break;
      }
    },
    mounted() {
      //this.validPlay()

    },

  };
</script>
<style scoped>
  /* .button {
    margin: 3% 0 0 80%;
    display: inline-block;
    background-color: #91d5ff;
    font-size: 25px;
    border-radius: 6px;
  } */

  .treeClass {
    margin: -12% 0 0 0;
    display: inline-block;
    color: #fff;
  }
</style>